CSS логически свойства ниво 2: Изграждане на наистина глобална мрежа с подобрена поддръжка за режими на писане

В продължение на десетилетия уеб разработчиците са изграждали оформления, използвайки речник, вкоренен във физическия свят: top, bottom, left, и right. Задавали сме margin-left, padding-top и border-right. Този мисловен модел ни служеше добре, когато уеб беше предимно среда с посока отляво-надясно и отгоре-надолу. Уеб обаче е глобален. Той е платформа за всички езици и култури, много от които не следват този прост насочен поток.

Езици като арабски и иврит се пишат отдясно-наляво. Традиционният японски и китайски могат да се пишат вертикално, отгоре-надолу и отдясно-наляво. Налагането на физически, отляво-надясно CSS модел върху тези системи на писане води до счупени оформления, разочароващо потребителско изживяване и планина от корекции в кода. Тук се намесват CSS логическите свойства и стойности (CSS Logical Properties and Values), които представляват фундаментална промяна на парадигмата от физически посоки към логически посоки, относителни спрямо потока. Докато Ниво 1 положи основите, CSS логическите свойства ниво 2 завършва картината, предоставяйки инструментите, от които се нуждаем, за да изградим наистина универсални потребителски интерфейси, съобразени с режима на писане.

Това изчерпателно ръководство ще ви потопи в подобренията, донесени от Ниво 2. Ще започнем с опресняване на основните концепции, след това ще разгледаме новите свойства и стойности, които запълват празнините, и накрая ще приложим всичко на практика, като изградим компонент, който се адаптира безпроблемно към всеки режим на писане. Пригответе се да промените начина, по който мислите за CSS оформлението завинаги.

Бързо опресняване: Основните концепции на логическите свойства (Ниво 1)

Преди да можем да оценим допълненията в Ниво 2, трябва да имаме солидно разбиране на основата, положена от Ниво 1. Цялата система е изградена върху две ключови концепции: режимът на писане (writing mode) и произтичащите от него блокова и редова оси.

Четирите режима на писане

CSS свойството writing-mode определя посоката, в която се излага текстът. Въпреки че често приемаме стандартната стойност за даденост, има няколко стойности, които фундаментално променят начина, по който съдържанието тече на страницата:

• horizontal-tb: Това е стандартната стойност за повечето западни езици. Текстът тече хоризонтално (редова ос) отляво-надясно (или отдясно-наляво в зависимост от посоката), а редовете се подреждат отгоре-надолу (блокова ос).
• vertical-rl: Използва се за традиционна източноазиатска типография (напр. японски, китайски). Текстът тече вертикално отгоре-надолу (редова ос), а редовете се подреждат отдясно-наляво (блокова ос).
• vertical-lr: Подобно на горното, но редовете се подреждат отляво-надясно (блокова ос). По-рядко срещано, но се използва в някои контексти като монголската писменост.
• sidelong-rl / sidelong-lr: Те са за специфични случаи на употреба, когато искате да разположите глифовете настрани. Те са по-рядко срещани в общото уеб съдържание.

Ключовата концепция: блокова срещу редова ос

Това е най-важната концепция за разбиране. В един логически свят спираме да мислим за „вертикално“ и „хоризонтално“ и започваме да мислим в термини на блокова (block) и редова (inline) оси. Тяхната ориентация зависи изцяло от writing-mode.

• Редовата ос (Inline Axis) е посоката, в която текстът тече в рамките на един ред.
• Блоковата ос (Block Axis) е посоката, в която се подреждат новите редове.

Нека видим как се проявява това:

• При стандартен български език (writing-mode: horizontal-tb): редовата ос е хоризонтална, а блоковата ос е вертикална.
• При традиционен японски (writing-mode: vertical-rl): редовата ос е вертикална, а блоковата ос е хоризонтална.

Тъй като тези оси могат да се сменят, свойства като width и height стават двусмислени. width размерът по хоризонталната ос ли е, или по редовата ос? Логическите свойства решават тази двусмисленост. Сега имаме start и end за всяка ос:

• block-start: „Горната част“ на български, но „дясната част“ при вертикален японски.
• block-end: „Долната част“ на български, но „лявата част“ при вертикален японски.
• inline-start: „Лявата част“ на български, но „горната част“ при вертикален японски.
• inline-end: „Дясната част“ на български, но „долната част“ при вертикален японски.

Съпоставяне на физически с логически свойства (Ниво 1)

Ниво 1 въведе изчерпателен набор от съответствия от физически към логически свойства. Ето няколко ключови примера:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (за позициониране) → inset-inline-start / inset-inline-end
• top / bottom (за позициониране) → inset-block-start / inset-block-end

Ниво 1 ни даде и полезни съкратени записи като margin-inline (за start и end) и padding-block (за start и end).

Добре дошли в Ниво 2: Какво е новото и защо е важно

Въпреки че Ниво 1 беше монументална стъпка напред, то остави някои забележими празнини. Някои основни CSS свойства като float, clear и resize нямаха логически еквиваленти. Освен това свойства като border-radius не можеха да се контролират логически, което принуждаваше разработчиците да се връщат към физически свойства за по-фино стилизиране. Това означаваше, че можехте да изградите 90% от оформлението с логически свойства, но все пак щяхте да се нуждаете от физически корекции за различните режими на писане, което частично обезсмисляше целта.

CSS логическите свойства ниво 2 адресира тези недостатъци директно. Не става въпрос за въвеждане на радикално нова система, а за завършване на тази, започната в Ниво 1. Това се постига по два основни начина:

1. Въвеждане на нови логически свойства и стойности за по-стари CSS функции, които са били по своята същност физически (като float).
2. Добавяне на логически съответствия за сложни съкратени записи, които преди са били игнорирани (като border-radius).

С Ниво 2 визията за напълно относителна спрямо потока система за стилизиране е почти завършена, което ни позволява да изграждаме сложни, красиви и стабилни компоненти, които работят навсякъде, за всеки, без хакове или корекции.

Подробен преглед: Нови логически стойности и свойства в Ниво 2

Нека разгледаме най-въздействащите допълнения, които Ниво 2 внася в нашия инструментариум за разработка. Това са инструментите, които запълват празнините и дават възможност за наистина универсален дизайн на компоненти.

Float и Clear: Логическата революция

Свойството float е крайъгълен камък на CSS оформлението от години, но неговите стойности, left и right, са дефиницията за физическа посока. Ако „флоутнете“ изображение вляво от параграф на български, то изглежда правилно. Но ако смените посоката на документа на отдясно-наляво (RTL) за арабски, изображението вече е от „грешната“ страна на текстовия блок. То трябва да е отдясно, което е началото на реда.

Ниво 2 въвежда две нови, логически ключови думи за свойството float:

• float: inline-start; Това „флоутва“ елемент в началото на редовата посока. В LTR езиците това е ляво. В RTL езиците това е дясно. В режим на писане vertical-rl това е горе.
• float: inline-end; Това „флоутва“ елемент в края на редовата посока. В LTR това е дясно. В RTL това е ляво. В vertical-rl това е долу.

По подобен начин свойството clear, използвано за контрол на обтичането на съдържание около „флоутнати“ елементи, получава своите логически аналози:

• clear: inline-start; Изчиства „флоутнати“ елементи от страната на inline-start.
• clear: inline-end; Изчиства „флоутнати“ елементи от страната на inline-end.

Това е революционно. Вече можете да създавате класически оформления с изображение и обтичащ го текст, които автоматично се адаптират към всяка посока на езика без нито един ред допълнителен CSS.

Подобрен контрол с логическо оразмеряване (resize)

Свойството resize, често използвано при textarea, позволява на потребителите да преоразмеряват елемент. Неговите традиционни стойности са horizontal, vertical и both. Но какво означава „хоризонтално“ във вертикален режим на писане? Все още означава преоразмеряване по физическата хоризонтална ос, което може да не е това, което потребителят или дизайнерът възнамерява. Потребителят вероятно иска да преоразмери елемента по неговата редова ос, за да направи редовете по-дълги или по-къси.

Ниво 2 въвежда логически стойности за resize:

• resize: inline; Позволява преоразмеряване по редовата ос.
• resize: block; Позволява преоразмеряване по блоковата ос.

Използването на resize: block; върху textarea на български позволява на потребителя да я направи по-висока. Използването му във вертикален режим на писане позволява на потребителя да я направи по-широка (което е блоковата посока). Просто работи.

`caption-side`: Логическо позициониране за надписи на таблици

Свойството caption-side определя разположението на caption (надписа) на таблицата. Старите стойности бяха top и bottom. Отново, те са физически. Ако намерението на дизайнера е да постави надписа „преди“ съдържанието на таблицата, top работи за хоризонтални режими на писане. Но в режим vertical-rl „началото“ на блоковия поток е отдясно, а не отгоре.

Ниво 2 предоставя логическото решение:

• caption-side: block-start; Поставя надписа в началото на блоковия поток.
• caption-side: block-end; Поставя надписа в края на блоковия поток.

`text-align`: Фундаментална логическа стойност

Въпреки че стойностите start и end за text-align съществуват от известно време, те са основна част от философията на логическите свойства и си струва да бъдат затвърдени. Използването на text-align: left; е често срещана грешка, която незабавно причинява проблеми с оформлението в RTL езици. Правилният, модерен подход е винаги да се използва:

• text-align: start; Подравнява текста в началото на редовата посока.
• text-align: end; Подравнява текста в края на редовата посока.

Перлата в короната на Ниво 2: Логически `border-radius`

Може би най-значимото и мощно допълнение в Ниво 2 е наборът от свойства за логическо управление на радиусите на границите. Преди, ако искахте една карта да има заоблени ъгли само в „горната“ си част, щяхте да използвате border-top-left-radius и border-top-right-radius. Това се проваля напълно във вертикален режим на писане, където „горните“ ъгли вече са ъглите start-start и end-start.

Ниво 2 въвежда четири нови разширени свойства, които съответстват на четирите ъгъла на елемент по начин, относителен спрямо потока. Конвенцията за именуване е border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Ъгълът, където се срещат страните block-start и inline-start.
• border-start-end-radius: Ъгълът, където се срещат страните block-start и inline-end.
• border-end-start-radius: Ъгълът, където се срещат страните block-end и inline-start.
• border-end-end-radius: Ъгълът, където се срещат страните block-end и inline-end.

Това може да бъде трудно за визуализиране в началото, така че нека го очертаем за различните режими на писане:

Съпоставяне на `border-radius` в `writing-mode: horizontal-tb` (напр. български)

• border-start-start-radius съответства на top-left-radius.
• border-start-end-radius съответства на top-right-radius.
• border-end-start-radius съответства на bottom-left-radius.
• border-end-end-radius съответства на bottom-right-radius.

Съпоставяне на `border-radius` в `writing-mode: horizontal-tb` с `dir="rtl"` (напр. арабски)

Тук редовата посока е обърната.

• border-start-start-radius съответства на top-right-radius. (Block-start е горе, inline-start е дясно).
• border-start-end-radius съответства на top-left-radius.
• border-end-start-radius съответства на bottom-right-radius.
• border-end-end-radius съответства на bottom-left-radius.

Съпоставяне на `border-radius` в `writing-mode: vertical-rl` (напр. японски)

Тук и двете оси са завъртени.

• border-start-start-radius съответства на top-right-radius. (Block-start е дясно, inline-start е горе).
• border-start-end-radius съответства на bottom-right-radius.
• border-end-start-radius съответства на top-left-radius.
• border-end-end-radius съответства на bottom-left-radius.

Използвайки тези нови свойства, можете да дефинирате радиуси на ъглите, които са семантично свързани с потока на съдържанието, а не с физическия екран. Ъгълът „start-start“ винаги ще бъде правилният ъгъл, независимо от езика или посоката на текста.

Практическо приложение: Изграждане на глобално съвместим компонент

Теорията е страхотна, но нека видим как работи това на практика. Ще изградим прост компонент за профилна карта, първо използвайки старите физически свойства, а след това ще го рефакторираме, за да използваме модерни логически свойства както от Ниво 1, така и от Ниво 2.

Картата ще има изображение, „флоутнато“ от едната страна, заглавие, малко текст, декоративна граница и заоблени ъгли.

„Старият“ начин: Чуплива карта с физически свойства

Ето как бихме могли да стилизираме тази карта преди няколко години:

/* --- CSS (Физически свойства) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

В стандартен LTR контекст на български език, това изглежда добре. Но ако го поставим в контейнер с dir="rtl" или writing-mode: vertical-rl, оформлението се чупи. Декоративната граница е от грешната страна, аватарът е от грешната страна, отстъпът е неправилен, а заоблените ъгли са разместени.

„Новият“ начин: Стабилна карта с логически свойства

Сега, нека рефакторираме същия компонент, използвайки логически свойства. Ще използваме свойства както от Ниво 1, така и новите допълнения от Ниво 2.

/* --- CSS (Логически свойства) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* Съкратеният запис `padding` вече е логически! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Силата на Ниво 2! */

  border-end-start-radius: 8px; /* Силата на Ниво 2! */

}

.logical-card .avatar {

  float: inline-start; /* Силата на Ниво 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Тестване и проверка

С този нов CSS можете да поставите компонента във всеки контейнер и той автоматично ще се адаптира.

• В LTR контекст: Ще изглежда идентично на оригиналната физическа версия.
• В RTL контекст (dir="rtl"): Аватарът ще се „флоутне“ надясно, неговият отстъп ще бъде отляво, декоративната граница ще бъде отдясно, а текстът ще бъде подравнен в началото (надясно). Заоблените ъгли ще бъдат правилно горе вдясно и долу вдясно. Просто работи.
• Във вертикален контекст (writing-mode: vertical-rl): „Ширината“ на картата (сега нейната вертикална inline-size) ще бъде 300px. Аватарът ще се „флоутне“ „нагоре“ (inline-start) с отстъп от „долната“ си страна (inline-end). Декоративната граница ще бъде от дясната страна (inline-start), а заоблените ъгли ще бъдат горе вдясно и горе вляво. Компонентът се е преориентирал напълно правилно без никакви медийни заявки или корекции.

Браузърна поддръжка и резервни варианти (Fallbacks)

Всичко това звучи фантастично, но какво да кажем за поддръжката от браузърите? Добрата новина е, че поддръжката за логическите свойства от Ниво 1 е отлична във всички съвременни браузъри. Можете и трябва да използвате свойства като margin-inline-start и padding-block още днес.

Поддръжката за по-новите функции от Ниво 2 бързо се подобрява, но все още не е универсална. Логическите стойности за float, clear и resize се поддържат добре. Логическите свойства за border-radius са най-новите и все още може да са зад флагове за функции или в последните версии на браузърите. Както винаги, трябва да се консултирате с ресурси като MDN Web Docs или CanIUse.com за най-актуалните данни за съвместимост.

Стратегии за прогресивно подобряване (Progressive Enhancement)

Тъй като CSS е проектиран да бъде устойчив, можем лесно да предоставим резервни варианти за по-стари браузъри. Каскадата ще гарантира, че ако браузърът не разбира логическо свойство, той просто ще го игнорира и ще използва физическото свойство, дефинирано преди него.

Ето как можете да напишете CSS, готов за резервни варианти:

.card {

  /* Резервен вариант за по-стари браузъри */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Модерно логическо свойство, което ще замени резервния вариант */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Този подход осигурява солидно базово изживяване за всички, като същевременно предоставя подобреното, адаптивно оформление за потребителите на съвременни браузъри. За проекти, които не се нуждаят от поддръжка на множество режими на писане, това може да е прекалено. Но за всяко глобално приложение, дизайн система или тема, това е стабилна и перспективна стратегия.

Бъдещето е логическо: Отвъд Ниво 2

Преходът от физическо към логическо мислене е една от най-важните промени в съвременния CSS. Той съобразява нашия език за стилизиране с реалността на разнообразния, глобален уеб. Той ни отдалечава от чупливите, ориентирани към екрана хакове, към устойчив, ориентиран към съдържанието дизайн.

Има ли все още празнини? Няколко. Логическите стойности за свойства като background-position или градиенти все още се обсъждат. Но с пускането на Ниво 2, огромното мнозинство от ежедневните задачи по оформление и стилизиране вече могат да бъдат изпълнени с чисто логически подход.

Призивът за действие към разработчиците е ясен: започнете да използвате логически свойства по подразбиране. Нека inline-size бъде вашият избор вместо width. Използвайте margin-inline, вместо да задавате ляв и десен отстъп поотделно. Тук не става въпрос само за поддръжка на различни езици; става въпрос за писане на по-добър, по-устойчив CSS. Компонент, изграден с логически свойства, е по своята същност по-използваем и адаптивен, независимо дали се използва в LTR, RTL или вертикално оформление. Това е просто по-добро инженерство.

Заключение: Прегърнете потока

CSS Logical Properties Level 2 не е просто колекция от нови функции; това е завършекът на една визия. Той предоставя последните, решаващи елементи, необходими за изграждане на оформления, които уважават естествения поток на своето съдържание, какъвто и да е този поток. Като възприемаме свойства като float: inline-start и border-start-start-radius, ние издигаме занаята си от просто позициониране на кутии на екрана до проектиране на наистина глобални, приобщаващи и перспективни уеб изживявания.

Следващия път, когато започнете нов проект или изграждате нов компонент, спрете, преди да напишете margin-left. Запитайте се: „Ляво ли имам предвид, или начало?“ Правейки тази малка мисловна промяна, вие ще допринесете за по-адаптивен и достъпен уеб за всички, навсякъде.